<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>
<nz-card>
  <form nz-form class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <span class="text">统计时间：{{ statistics_date }}</span>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control>
            <nz-cascader
              [nzShowSearch]="true"
              [nzOptions]="companyShopOptions"
              [(ngModel)]="values"
              (ngModelChange)="onChanges($event)"
              name="shopId"
            ></nz-cascader>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-radio-group [(ngModel)]="q.dateType" name="dateType" (ngModelChange)="dateTypeChange($event)">
              <label nz-radio [nzValue]="1">昨日</label>
              <label nz-radio [nzValue]="2">近7天</label>
              <label nz-radio [nzValue]="3">近30天</label>
              <label nz-radio [nzValue]="4">日</label>
              <nz-date-picker
                *ngIf="q.dateType == 4"
                [(ngModel)]="q.dateVal"
                name="dateVal"
                style="margin-right: 24px"
                (ngModelChange)="datePickerChange($event)"
              ></nz-date-picker>
              <label nz-radio [nzValue]="5">月</label>
              <nz-date-picker
                nzMode="month"
                *ngIf="q.dateType == 5"
                name="dateVal"
                [(ngModel)]="q.dateVal"
                (ngModelChange)="datePickerChange($event)"
              ></nz-date-picker>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</nz-card>
<nz-spin *ngIf="loading" class="modal-spin"></nz-spin>
<div [style]="loading ? 'display: none' : ''">
  <nz-card nzTitle="店铺整体看板">
    <div nz-row [nzGutter]="24" class="pt-lg" *ngIf="totalData">
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'商品浏览量'" total="{{ totalData['ctm_item_view_pv'] }}" contentHeight="30px">
          <trend [flag]="totalData['compare_ctm_item_view_pv'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_ctm_item_view_pv'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_ctm_item_view_pv'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'商品访客数'" total="{{ totalData['ctm_item_view_uv'] }}" contentHeight="30px">
          <trend [flag]="totalData['compare_ctm_item_view_uv'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_ctm_item_view_uv'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_ctm_item_view_uv'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'客单价'" total="${{ totalData['per_customer_value'] | number: '0.2-2' }}" contentHeight="30px">
          <trend [flag]="totalData['compare_per_customer_value'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_per_customer_value'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_per_customer_value'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'被访问商品数'" total="{{ totalData['ctm_item_view_item_cnt'] }}" contentHeight="30px">
          <trend [flag]="totalData['compare_ctm_item_view_item_cnt'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_ctm_item_view_item_cnt'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_ctm_item_view_item_cnt'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'下单买家数'" total="{{ totalData['order_buyer_cnt'] }}" contentHeight="30px">
          <trend [flag]="totalData['compare_order_buyer_cnt'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_order_buyer_cnt'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_order_buyer_cnt'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'订单确认件数'" total="{{ totalData['item_verified_cnt'] }}" contentHeight="30px">
          <trend [flag]="totalData['compare_item_verified_cnt'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_item_verified_cnt'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_item_verified_cnt'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'下单转化率'" total="{{ totalData['ctm_order_view_rate'] * 100 | number: '0.2-2' }}%" contentHeight="30px">
          <trend [flag]="totalData['compare_ctm_order_view_rate'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_ctm_order_view_rate'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_ctm_order_view_rate'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
      <div nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="3">
        <g2-card [title]="'超时罚金比'" total="{{ totalData['overtime_rate'] * 1000 | number: '0.2-2' }}%" contentHeight="30px">
          <trend [flag]="totalData['compare_overtime_rate'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
            {{ compareText }}
            <span class="pl-sm" [style]="totalData['compare_overtime_rate'] > 0 ? 'color: red' : 'color:green'">
              {{ totalData['compare_overtime_rate'] * 100 | number: '0.2-2' }}%
            </span>
          </trend>
        </g2-card>
      </div>
    </div>
    <nz-space></nz-space>
    <div nz-col nzSpan="24">
      <chart-echarts [option]="option" *ngIf="option"></chart-echarts>
      <nz-empty nzNotFoundImage="simple" *ngIf="!option"></nz-empty>
    </div>
  </nz-card>
  <nz-card nzTitle="店铺流量看板">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
        <p>一级流量走向</p>
        <chart-echarts [option]="firstOption" *ngIf="firstOption"></chart-echarts>
        <nz-empty nzNotFoundImage="simple" *ngIf="!firstOption"></nz-empty>
      </div>
      <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
        <p>二级流量来源</p>
        <nz-space></nz-space>
        <nz-table *ngIf="secondData" #secondTable [nzData]="secondData" [nzShowPagination]="false">
          <thead>
            <tr>
              <th>排名</th>
              <th>流量来源</th>
              <th></th>
              <th>下单转化率</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let sec of secondTable.data; let i = index">
              <td>{{ i + 1 }}</td>
              <td>{{ sec['source']['name'] }}</td>
              <td>{{ sec['ctm_item_click_uv'] }}</td>
              <td>{{ sec['ctm_order_view_rate'] * 100 | number: '0.2-2' }}%</td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </nz-card>
</div>
